{% extends "shuup/admin/base.jinja" %}
{% from "shuup/admin/macros/general.jinja" import content_block %}
{% from "shuup/admin/macros/multilanguage.jinja" import render_monolingual_fields %}
{% block content %}
    <div class="container-fluid">
        <div class="content-block">
            <form method="post" id="create_shipment">
                {% csrf_token %}
                <table class="table table-condensed table-shuup table-striped table-bordered">
                <thead>
                    <tr>
                        <th>{% trans %}Order Line{% endtrans %}</th>
                        <th class="text-right">{% trans %}To Ship{% endtrans %}</th>
                        <th class="text-right d-sm-none d-md-table-cell">{% trans %}Ordered{% endtrans %}</th>
                        <th class="text-right d-sm-none d-md-table-cell">{% trans %}Shipped{% endtrans %}</th>
                        <th class="text-right d-sm-none d-md-table-cell">{% trans %}Refunded{% endtrans %}</th>
                        <th class="text-right d-sm-none d-md-table-cell">{% trans %}Unshipped{% endtrans %}</th>
                        <th class="text-right d-none d-sm-table-cell d-md-none">{% trans %}Ordered{% endtrans %}/&#x200b;{% trans %}Shipped{% endtrans %}/&#x200b;{% trans %}Unshipped{% endtrans %}</th>
                    </tr>
                    </thead>
                    <tfoot>
                    <tr>
                        <th></th>
                        <th>
                            <button class="btn btn-sm btn-info float-right" type="button" onclick="setAllProducts()">
                                <span class="d-sm-none d-md-block">{% trans %}Set All Products To Ship{% endtrans %}</span>
                                <span class="d-none d-sm-block d-md-none">{% trans %}Ship All{% endtrans %}</span>
                            </button>
                        </th>
                        {% set ordered_total=form.product_summary.values()|sum("ordered")|number %}
                        {% set shipped_total=form.product_summary.values()|sum("shipped")|number %}
                        {% set refunded_total=form.product_summary.values()|sum("refunded")|number %}
                        {% set unshipped_total=form.product_summary.values()|sum("unshipped")|number %}
                        <th class="text-right d-sm-none d-md-table-cell">{{ ordered_total }}</th>
                        <th class="text-right d-sm-none d-md-table-cell">{{ shipped_total }}</th>
                        <th class="text-right d-sm-none d-md-table-cell">{{ refunded_total }}</th>
                        <th class="text-right d-sm-none d-md-table-cell">{{ unshipped_total }}</th>
                        <th class="text-right d-none d-sm-table-cell d-md-none">{{ ordered_total }}/{{ shipped_total }}/{{ unshipped_total }}</th>
                    </tr>
                    </tfoot>
                    <tbody>
                    {% for product_id, info in form.product_summary.items() %}
                        {% set field = form["q_" ~ product_id] %}
                        <tr>
                            <td>{{ field.label }}</td>
                            <td class="text-right quantity-column">
                                <div class="{% if field.errors %}has-error{% endif %}">
                                    {{ field }}
                                    {% if field.errors %}
                                        <div class="help-text text-danger">
                                        {% for error in field.errors %}
                                            {{ error }}<br>
                                        {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            </td>
                            <td class="text-right d-sm-none d-md-table-cell">{{ info.ordered|number }}</td>
                            <td class="text-right d-sm-none d-md-table-cell">{{ info.shipped|number }}</td>
                            <td class="text-right d-sm-none d-md-table-cell">{{ info.refunded|number }}</td>
                            <td class="text-right d-sm-none d-md-table-cell">{{ info.unshipped|number }}</td>
                            <td class="text-right d-none d-sm-table-cell d-md-none">{{ info.ordered|number }}/{{ info.shipped|number }}/{{ info.unshipped|number }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <hr>
                {{ render_monolingual_fields(form, exclude=form.default_field_keys) }}
            </form>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
        function setAllProducts() {
            $(".quantity-column input").each(function() {
                var $input = $(this);
                var amount = parseFloat($input.data("max"));
                $input.val(amount);
            })
        }
    </script>
{% endblock %}
